<!--
 * @Author: ujjldn ujjldn0515@163.com
 * @Date: 2025-08-01 22:37:58
 * @LastEditors: ujjldn ujjldn0515@163.com
 * @LastEditTime: 2025-08-01 22:41:09
 * @FilePath: \g-dialog\test\test.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>字符选择器示例</title>
  <!-- 引入Vue.js -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <!-- 引入Element Plus（可选） -->
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
  <script src="https://unpkg.com/element-plus"></script>
  <!-- 引入字符选择器 -->
  <script src="./character-selector.umd.js"></script>
</head>
<body>
  <div id="app">
    <h2>字符选择器演示</h2>
    <div id="character-selector-container"></div>
    
    <div style="margin-top: 30px;">
      <h3>选中的字符</h3>
      <input 
        id="result-input" 
        placeholder="选中的字符将显示在这里" 
        style="width: 300px; padding: 10px;"
      />
      <button onclick="insertSelectedChars()">插入字符</button>
    </div>
  </div>

  <script>
    // 创建字符选择器实例
    const selector = CharacterSelector.createCharacterSelector('#character-selector-container');
    
    // 插入字符到输入框的函数
    function insertSelectedChars() {
      const selectedChars = selector.getAndClearSelectedChars();
      const input = document.getElementById('result-input');
      const startPos = input.selectionStart || input.value.length;
      const endPos = input.selectionEnd || input.value.length;
      
      const beforeText = input.value.substring(0, startPos);
      const afterText = input.value.substring(endPos, input.value.length);
      input.value = beforeText + selectedChars + afterText;
      
      // 设置光标位置
      const newCursorPos = startPos + selectedChars.length;
      input.setSelectionRange(newCursorPos, newCursorPos);
      input.focus();
    }
  </script>
</body>
</html>

<!--

// ES6模块导入
import { createCharacterSelector } from './character-selector.umd.js';

// 或者通过script标签引入后使用
const { createCharacterSelector } = window.CharacterSelector;

// 创建字符选择器
const selector = createCharacterSelector('#my-container');

// 获取选中的字符
const chars = selector.getSelectedChars();

// 清空选择
selector.clearSelection();

-->